<template>
  <div class="tutor-card">
    <div class="header">
      <div class="avatar" :style="{ backgroundImage: `url(${tutorInfo.avatar})` }"></div>
      <div class="info">
        <div class="name">{{ tutorInfo.name }}</div>
        <div class="tags">
          <span class="tag" v-for="(tag, index) in tutorInfo.keywords" :key="index">{{ tag }}</span>
        </div>
        <div class="price">
          <span class="currency">¥</span>
          <span class="amount">{{ tutorInfo.price }}</span>
          <span class="unit">元/小时</span>
        </div>
      </div>
    </div>
    <div class="description">{{ tutorInfo.description }}</div>
    <button class="book-btn" @click="handleBook">立即预约</button>
  </div>
</template>

<script setup>
const props = defineProps({
  tutorInfo: {
    type: Object,
    required: true,
    default: () => ({
      name: '',
      keywords: [],
      price: 0,
      description: '',
      avatar: ''
    })
  }
})

const handleBook = () => {
  // 处理预约逻辑
  emit('onBook', props.tutorInfo)
}

const emit = defineEmits(['onBook'])
</script>

<style lang="scss" scoped>
.tutor-card {
  width: 180px;
  background: #ffffff;
  border-radius: 12px;
  padding: 10px;
  border:1px solid #CCCCCC;
  // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .header {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;

    .avatar {
      width: 46px;
      height: 68px;
      background: #f0f0f0;
      border-radius: 8px;
      background-size: cover;
      background-position: center;
      flex-shrink: 0;
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #000;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;

        .tag {
          display: inline-block;
          color: #126983;
          // color: #666;
          background: #1269831A;

          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
        }
      }

      .price {
        .currency {
          color: #E52121;
          font-size: 16px;
          font-weight:600
        }

        .amount {
          color: #E52121;
          font-size: 16px;
          font-weight:600
        }

        .unit {
          color: #999;
          font-size: 12px;
          margin-left: 4px;
          font-weight: 400;
        }
      }
    }
  }

  .description {
    font-size: 12px;
    color: #333333;
    font-weight:400;
    line-height: 17px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .book-btn {
    width: 100%;
    height: 28px;
    background: var(--main-color);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.3s;
    // position: absolute;
    // bottom: 0;
    // left: 0;

    &:hover {
      opacity: 0.9;
    }
  }
}
</style>